<template>
  <div>
    <!-- 顶部导航栏 -->
    <el-menu
      mode="horizontal"
      :ellipsis="false"
      class="nav-bar"
      background-color="#CCE2BD"
      text-color="#222"
      active-text-color="#B7D6A3"
      style="width: 100%"
    >
      <!-- Logo 区域 -->
      <el-menu-item
        index="0"
        style="
          pointer-events: none;
          white-space: nowrap;
          display: flex;
          align-items: center;
        "
      >
        <img
          src="@/assets/logo.png"
          class="logo-img"
          style="height: 40px; margin-right: 10px"
        />
        <span
          class="logo-text"
          style="font-weight: bold; font-size: 1.5rem; color: #222"
          >薇启Vichi.</span
        >
      </el-menu-item>
      <!-- 菜单项 -->
      <el-menu-item
        index="1"
        style="white-space: nowrap"
        @click="goToCompanionshipPage"
        >智伴优学</el-menu-item
      >
      <el-menu-item index="2" style="white-space: nowrap" @click="goToAskPage"
        >睿记精解</el-menu-item
      >
      <el-menu-item index="3" style="white-space: nowrap"
        >心聆秘语</el-menu-item
      >
      <el-menu-item
        index="4"
        style="margin-left: auto; white-space: nowrap; flex: 0 0 auto"
      >
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        个人中心
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Calendar, Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();

const goToAskPage = () => {
  router.push("/ask");
};

const goToCompanionshipPage = () => {
  router.push("/companionship");
};
</script>

<style scoped>
.nav-bar {
  display: flex;
  align-items: center;
  padding: 0 2vw;
  border-bottom: none;
}
</style>
